<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.1.min.js"></script>

    <style>
        body{
            background-color: white;
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "思源宋体 CN VF Regular",sans-serif;
            font-weight: 300;
            background-image: url("/img/bg02.webp");
            background-size: cover;
        }

        @font-face {
            font-family: "思源宋体 CN VF Regular";
            src: url("//at.alicdn.com/wf/webfont/ZLAdiP4iXWgw/ZqhHUsFRUfX7bLCb7DpeQ.woff2") format("woff2"),
            url("//at.alicdn.com/wf/webfont/ZLAdiP4iXWgw/6g8H08xcLf2eQqidaCKiV.woff") format("woff");
            font-display: swap;
        }

        .login-div{
            width: 250px;
            height: 450px;
            padding: 60px 35px 35px 35px;
            border-radius: 10px;
            background-image: url("/img/bg01.webp");
            background-size:cover;
            box-shadow:
                /*bottom shadow*/
                    0 20px 20px rgba(0,0,0,0.2),
                    0 5px 10px rgba(0,0,0,0.2),
                        /*long bottom shadow*/
                    0 70px 50px rgba(0,0,0,0.4),
                        /*right shadow*/
                    30px 50px 50px rgba(0,0,0,0.2),
                        /*left shadow*/
                    -30px 50px 50px rgba(0,0,0,0.2),
                        /*right inset*/
                    inset 20px 0 60px rgba(0,0,0,0.1),
                        /*left inset*/
                    inset -20px 0 60px rgba(0,0,0,0.1);
        }
        .title{
            text-align: center;
            font-size: 28px;
            padding-top: 24px;
            letter-spacing: 0.5px;
        }
        .fields{
            width: 100%;
            padding: 100px 5px 30px 5px;
        }
        .fields input{
            border: none;
            outline: none;
            background: none;
            font-size: 15px;
            font-family: "思源宋体 CN VF Regular",sans-serif;
            color: white;
            padding: 10px 10px 10px 5px;
        }
        .username,.password{
            display: block;
            border-bottom: 1px solid #b3b3b3;
        }
        .signin-button{
            outline: none;
            border: none;
            cursor: pointer;
            width: 100%;
            height: 50px;
            border-radius: 5px;
            font-size: 20px;
            font-family: "思源宋体 CN VF Regular",sans-serif;
            color: white;
            text-align: center;
            letter-spacing: 1px;
            background: radial-gradient(circle,#24cfaa,#26c5a3,#28bb9c,#29b294,#2aa88d);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .signin-button:hover{
            background: radial-gradient(circle,#2fdbb6,#32d6b3,#32c9a8,#36c7a7,#38bb9f);
        }
        .signin-button:active{
            background: radial-gradient(circle,#1da88a,#1ea084,#229c82,#23947b,#238d76);
        }
        .link a{
            text-decoration: none;
            color: white;
            font-size: 15px;
        }
    </style>
</head>
<body>
<div class="login-div">
    <div class="title">学生登录界面</div>

    <div class="fields">
        <div class="username"><input type="username" id="username" name="username" class="user-input" placeholder="用户名"></div>
        <div class="password"><input type="password"  id="password" name="password" class="pass-input" placeholder="密码"></div>
    </div>
    <button class="signin-button" onclick="login();">登录</button>
</div>



<script src="/js/bootstrap.min.js"></script>

<script type="text/javascript">

    function login(){
        var name=$("#username").val();
        var password=$("#password").val();

        $.ajax({
            url:"/webapi/login/user",

            data:{
                username:name,
                password:password
            }

        }).done(function (rs){
            if(rs>=0){
                //成功
                console.log("成功");
                window.location.href="/student/list";
                alert("欢迎登入！")
            }else
            {
                console.log("失败");
                alert("出错了，您的用户名和密码错误");
            }
        })

    }

</script>

</body>
</html>